<template>
    <div v-if="value" class="carInfoItem">
     <div  v-if="value.apply_type == 1" >
        
        <div class="userPlateInfo">
            <div class="username">{{ value.DJFZR }}</div>            
            <div class="plateType"> <van-tag style="margin-left: 10px;"  :color="color" >中大型客车</van-tag></div>
        </div>

        <div class="plateNo item">{{ value.CPH }}</div>

        <div class="item">
            <div class="itemIcon">
                <van-icon name="home-o" />
            </div>
            <div class="label">对接单位</div>
            {{ value.XNDJDW }}
        </div>
        

        <div class="item">
            <div class="itemIcon">
                <van-icon name="phone-o" />
            </div>
            <div class="label">联系方式</div>
            {{ value.DJFZRDH }}
        </div>
        <div class="item">
            <div class="itemIcon">
                <van-icon name="calendar-o" />
            </div>
            <div class="label">通行日期</div>
            {{ value.TXRQ.substring(0,10) }}
        </div>
        <div class="item">
            <div class="itemIcon">
                <van-icon name="friends-o" />
            </div>
            <div class="label">乘坐人数</div>
            {{ value.CSRYSL}}人
        </div>
        
        <div class="item">
            <div class="itemIcon">
                <van-icon name="info-o" />
            </div>
            <div class="label">出入校事由</div>
            <div class="remark">{{value.CRXSY}}</div>
        </div>
        
        
    </div>

    <div   v-if="value.apply_type == 2" >

         <div class="userPlateInfo">
            <div class="username">{{ value.XM }}</div>            
            <div class="plateType"> <van-tag style="margin-left: 10px;padding-bottom:1px;"  :color="color" >学校公车</van-tag></div>
        </div>

        <div class="plateNo item">{{ value.CPH }}</div>
        
        <div class="item">
            <div class="itemIcon">
                <van-icon name="home-o" />
            </div>
            <div class="label">所属单位</div>
            {{ value.DW }}
        </div>
        
       
        <div class="item">
            <div class="itemIcon">
                <van-icon name="phone-o" />
            </div>
            <div class="label">联系方式</div>
            {{ value.LXFS }}
        </div>
    </div>

    <div  v-if="value.apply_type == 3"  >
        
         <div class="userPlateInfo">
            <div class="username">{{ value.XM }}</div>            
            <div class="plateType"> <van-tag style="margin-left: 10px;"  :color="color" >学生车辆</van-tag></div>
        </div>

        <div class="plateNo item">{{ value.CPH }}</div>

        <div class="item">
             <div class="itemIcon">
                <van-icon name="home-o" />
            </div>
            <div class="label">所在学院</div>
            {{value.XY}}
        </div>
        
       
        <div class="item">
             <div class="itemIcon">
                <van-icon name="phone-o" />
            </div>
            <div class="label">联系方式</div>
            {{ value.LXFS }}
        </div>
    </div>

    <div  v-if="value.apply_type == 4"  @click="handleViewUser" >           
        <div class="userPlateInfo">
            <div class="username">{{ value.XM }}</div>            
            <div class="plateType"> <van-tag style="margin-left: 10px;"  :color="color" >教职工车辆</van-tag></div>
        </div>     
        
        <div class="plateNo item">{{ value.CPH }}</div>

        <div class="item" >
            <div class="itemIcon">
                <van-icon name="home-o" />
            </div>
            <div class="label">所在单位</div>
            {{value.DW}}
        </div>
        
        <div class="item">
             <div class="itemIcon">
                <van-icon name="phone-o" />
            </div>
            <div class="label">联系方式</div>
            {{value.LXFS}}
        </div>
        
    </div>

    <div class="showDetail" v-if="link && !showBtns"  @click="handleClick">查看入校记录
        <van-icon name="arrow" />
    </div>


    
        <div class="showDetail detailBtns"  v-if="showBtns">            
            <van-button size="small"  color="#1989fa"  class="optBtns" @click="handleViewUser" v-if="props.value?.GZH && props.value?.apply_type == 4 ">人员信息</van-button>
            <van-button size="small" color="#1976d2" class="optBtns" @click="handleClick">入校记录</van-button>
        </div>
        

</div>


<van-popup v-model:show="showDetail" closeable position="bottom" :style="{ height: '70%' }" teleport="body" round>
            <div class="carInLog">
                <div class="detailTitleCarLOg">车辆进出校记录</div>         
                <CarLogList :plate-no="plateNo"/>   
            </div>
            
    </van-popup>

</template>
<script lang="ts" setup>
import { saveLog } from '@/api/queryLog';
import type { CarInfo } from '@/types/common';
import { computed ,ref} from 'vue';
import { useRouter } from 'vue-router';
import CarLogList from '@/views/car/carLogList.vue';

const router = useRouter();
interface CarInfoItemProps{
    value?:CarInfo
    link?:boolean
    showBtns?:boolean
}
const props = defineProps<CarInfoItemProps>()
const plateNo = ref()
const showDetail = ref(false)
const color = computed(()=>{
    
    if(props.value?.apply_type == 1)return '#b1b162' //大客车
    if(props.value?.apply_type == 2)return '#4385f5' //公车
    if(props.value?.apply_type == 3)return '#4d717a' //学生
    if(props.value?.apply_type == 4)return '#1989fa'
})

const handleViewUser = ()=>{

    if(props.value?.GZH && props.value?.apply_type == 4){
        router.push('/query/person/personAllInfoDetail?id='+props.value?.GZH);
    }else{
        
    }

    
}

const handleClick = ()=>{
    showDetail.value = true;
    if(props.value?.CPH) plateNo.value = props.value?.CPH;
    if(props.value?.CPH){
        saveLog("点击车辆备案","tab_car_item_click",props.value.CPH);
    }
}

</script>
<style lang="less" scoped>
.carInfoItem{
    .userPlateInfo{
        display: flex;
        margin-bottom: 10px;
        .username{
            font-size:17px;
            font-weight: bold;
            padding-left: 20px;


        }

        .plateType{
            display: flex;
            align-items: center;
        }
        
    }
    .item{
        margin-bottom: 0.5em;
        display: flex;
        .itemIcon{
            margin-right: 2px;
        }
        .label{
            width: 85px;
            text-align: justify;
            text-align-last: justify;
            margin-right: 10px;
            color: #888;
            font-size: 16px;
        }
        .label::after{
            content: ':';
        }

        .remark{
            width: 100px;
            flex-grow: 1;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        
    }

    .item.plateNo{
        font-weight: bold;
        font-size:17px;
        font-weight: bold;
        padding-left: 20px;
    }

    .showDetail{
        border-top: 1px solid #dfdfdf;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-top: 10px;
    }
    .showDetail.detailBtns{
        margin-top: 5px;
        padding-top: 5px;
    }

    .detailBtns{
        display: flex;
        justify-content: right;
        margin-bottom: -10px;
        .optBtns{
            margin-right: 10px;
        }
    }
}

.carInLog{
    background-color: #f2f2f2;
    min-height: 100vh;
    .detailTitleCarLOg{
        text-align: center;
        line-height: 40px;
        font-size: 18px;
        margin-top: 10px;
    }
}


</style>